/* 1. 设置整个页面的基础样式 */
body {
    margin: 0; /* 去掉body默认的边距 */
    height: 100vh; /* 让body高度等于整个屏幕高度 */
    display: flex; /* 使用弹性布局，方便内容居中 */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    font-family: 'SimSun', '宋体', serif; 
    background-color: #f5f5f5; /* 页面背景设为浅灰色 */
}

/* 2. 海报的外容器 (Class选择器) */
.poster-container {
    position: relative; /* 设置为相对定位，让里面的元素可以绝对定位 */
    width: 450px;
    height: 675px; 
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3); /* 给海报加一个阴影 */
    border-radius: 8px; /* 海报边框稍微圆角 */
    overflow: hidden; /* 隐藏图片超出的部分 */
}

/* 3. 海报背景图 (Class选择器) */
.poster-bg {
    position: absolute; /* 绝对定位，相对于它的父容器.poster-container */
    width: 120%;
    height: 120%;
    background-image: url('AutumnMountain.jpeg');
    background-size: cover; /* 让背景图覆盖整个容器 */
    background-position: center; /* 背景图居中显示 */
    opacity: 0.85; /* 背景图透明度 */
}

/* 4. 文字容器 (Class选择器) */
.text-content {
    position: relative; /* 设置为相对定位，让它显示在背景图之上 */
    z-index: 1; /* 设置一个层级，确保文字在背景图上面 */
    color: #333; /* 文字颜色深灰色 */
    text-align: center; /* 文字居中 */
    padding: 30px 20px; /* 文字内容的内边距 */
    background-color: rgba(255, 255, 255, 0.7); /* 给文字区域加一个半透明的白色背景，让文字更清晰 */
    border-radius: 5px;
    margin: 40px 20px; /* 文字区域的外边距 */
}

/* 5. 诗的标题 (Class选择器) */
.poem-title {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 5px;
    color: #2c3e50;
}

/* 6. 诗的作者 (Class选择器) */
.poem-author {
    font-size: 14px;
    margin-bottom: 25px;
    color: #7f8c8d;
}

/* 7. 诗的内容 (Class选择器) */
.poem-content {
    font-size: 18px;
    line-height: 2.0; /* 诗句行距 */
    margin: 10px 0;
}